<template>
  <div>
    <div v-loading="loading">
      <el-form ref="form" :model="form" :rules="rules" size="small" label-width="150px">
        <el-form-item label="商户平台logo：" prop="bisWebLogo">
          <div class="app-upload-container flex-x-start-center">
            <el-upload
              :action="uploadImgApi"
              :show-file-list="false"
              :headers="{ 'X-SERVICER-TOKEN': $store.state.user.token }"
              :before-upload="uploadImgBefore"
              :on-progress="uploadImgProgress"
              :on-error="uploadImgError"
              :on-success="
                (res, file) => {
                  return uploadImgSuccess(res, file, 'bisWebLogo');
                }
              "
            >
              <el-image
                v-if="form.bisWebLogo"
                :src="fileBaseUrl + form.bisWebLogo"
                class="upload-img"
                fit="contain"
              />
              <i v-else class="el-icon-plus" />
            </el-upload>
            <el-button
              v-if="form.bisWebLogo"
              type="text"
              round
              size="small"
              class="app-color-danger"
              style="padding-left: 10px"
              @click="form.bisWebLogo=null"
            >删除
            </el-button>
          </div>
          <ul class="app-tips">
            <li>1.仅支持JPG/PNG文件，且不超过1MB</li>
            <li>2.像素大小控制在100px * 100px</li>
          </ul>
        </el-form-item>
        <el-form-item label="商户平台名称：" prop="bisWebTitle">
          <el-input v-model.trim="form.bisWebTitle" maxlength="10" show-word-limit />
        </el-form-item>
        <el-form-item label="品牌公众号/小程序：" prop="customWx">
          <el-switch v-model="form.customWx" />
        </el-form-item>
        <el-form-item>
          <el-button size="small" round type="primary" @click="submitForm">保存</el-button>
        </el-form-item>
      </el-form>
    </div>

  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { oemInfo, saveOem } from '@/api/sp/oem'
import { uploadImgApi } from '@/api/upload'

export default {
  data() {
    return {
      // 配置
      // 校验字段相关
      rules: {
      },
      uploadImgApi: uploadImgApi,
      // 状态
      loading: false,
      // 数据
      form: {
        servicerId: null,
        bisWebLogo: null,
        bisWebTitle: null,
        customWx: false
      }
    }
  },
  computed: {
    ...mapGetters(['fileBaseUrl'])
  },
  watch: {},
  beforeCreate() {
  },
  created() {
  },
  beforeMount() {
  },
  mounted() {
    this.fetchData()
  },
  beforeUpdate() {
  },
  update() {
  },
  activated() {
  },
  deactivated() {
  },
  beforeDestroy() {
  },
  destroyed() {
  },
  methods: {
    /**
     * 数据组
     */
    fetchData() {
      this.loading = true
      oemInfo().then(res => {
        this.form = res.data
      }).finally(() => {
        this.loading = false
      })
    },
    /**
     * 按钮组
     */
    // 上传图片前
    uploadImgBefore(file) {
      return this.$uploadImgBefore({ file, maxSizes: 1, fileType: ['JPG', 'PNG'] })
    },

    // 上传图片中
    uploadImgProgress() {
      this.loading = true
    },

    // 上传图片错误
    uploadImgError() {
      this.loading = false
    },

    // 上传图片成功
    uploadImgSuccess(res, file, type) {
      this.loading = false
      if (res.code === 0) {
        this.form[type] = res.data.path
        this.$refs.form.clearValidate([type])
      } else {
        this.$message.error(res.code + ':' + res.msg)
      }
    },

    // 修改密码
    submitForm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.loading = true
          saveOem({ data: this.form }).then(() => {
            this.$notify({
              title: '成功',
              message: '保存成功',
              type: 'success',
              duration: 2000,
              offset: 40
            })
          }).finally(() => {
            this.loading = false
          })
        }
      })
    }
    /**
     * 状态组
     */
    /**
     * 方法组
     */
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.el-input {
  width: 400px;
}

.app-upload-container {
  ::v-deep.el-upload {
    width: 100px;
    height: 100px;
  }

  .upload-img {
    width: 100px;
    height: 100px;
  }

  .el-icon-plus {
    line-height: 100px;
  }
}

</style>
